<md-card ng-show="subjectObject">

  <md-toolbar class="md-hue-2">

    <!--<div class="md-toolbar-tools">-->
    <div layout="row" layout-xs="column" layout-align="center center" layout-wrap>
      <div flex>
        <h3 class="md-toolbar-tools" style="padding:0px;" hide-xs>
          <div layout="row" style="height: 64px;">
            <md-icon class="md-avatar-icon" md-svg-icon="src/assets/icons/avro.svg"
                     style="height: 40px;width: 40px;padding: 5px;background-color: rgba(255,255,255,0.87);border-radius: 60px;margin-left: 10px;margin-right: 10px;">
            </md-icon>
            <!--<md-tooltip md-direction="top" style="margin-top:15px;margin-left:-20px">-->
            <!--Schema [{{subjectObject.subjectName}}]-->
            <!--</md-tooltip>-->
            <div layout="column" style="padding-top: 12px;padding-bottom: 12px;">

              <div flex>{{subjectObject.subjectName}}</div>
              <div flex>
                  <span>
                    <p class="md-caption"
                       style="margin-top:10px;margin-bottom:0px;">
                      SCHEMA ID: {{subjectObject.id}}
                    </p>
                  </span>
              </div>
            </div>
          </div>
        </h3>
        <!--Mobile version only-->
        <h3 class="md-toolbar-tools" style="margin-top:10px;text-align:center;" hide-gt-xs>
          <div layout="column">
            <div flex><span style="color: black;">{{subjectObject.subjectName}}</span></div>
            <div flex>
                  <span>
                    <p class="md-caption"
                       style="margin-top:10px;margin-bottom:0px; text-align:center;">
                      SCHEMA ID: {{subjectObject.id}}
                    </p>
                  </span>
            </div>
          </div>
        </h3>
        <span flex></span>
      </div>

      <div flex-gt-sm="nogrow" flex>
        <md-button ng-hide="multipleVersionsOn"
                   md-no-ink
                   style="color: white; background-color: rgb(55, 70, 79);box-shadow:0px;cursor:text;"
                   disabled>
          version {{subjectObject.version}}
        </md-button>

        <md-menu d-position-mode="target-right target" ng-show="multipleVersionsOn">
          <md-button style="color: white; background-color: rgba(139, 195, 74,0.9)" class="md-raised" ng-click="$mdOpenMenu($event)">
            version {{subjectObject.version}}
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </md-button>
          <md-menu-content width="3">
            <md-menu-item ng-repeat="version in otherVersions | orderBy:'version'">
              <md-button click-link="cluster/{{cluster}}/schema/{{subjectObject.subjectName}}/version/{{version}}">
                <span md-menu-align-target="">version</span> {{version}}
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </div>
    <!--</div>-->
    <div class="buttonGroup" ng-hide="hideEdit" ng-if="aceReady && !showDeleteConfirmation"  >

        <!-- When in non-editable state, display the EDIT button -->
        <md-button ng-show="!isAvroAceEditable" ng-click="toggleEditor();" ng-if="!readonlyMode"
           aria-label="EDIT"
           aria-hidden="false">
          <i class="fa fa-pencil-square-o ng-scope" aria-hidden="true"></i>
            EDIT
        </md-button>
        <!-- When in edit-state, display the CANCEL button -->
        <md-button ng-show="isAvroAceEditable && !readonlyMode" ng-click="cancelEditor();"
            type="button" aria-label="CANCEL"
           aria-hidden="false">
          <i class="fa fa-ban ng-scope" aria-hidden="true"></i>
            CANCEL
        </md-button>
        <md-menu d-position-mode="target-right target" ng-if="!isAvroAceEditable && allowSchemaDeletion && !readonlyMode">
          <md-button ng-click="$mdOpenMenu($event)">
              <i class="fa fa-trash" aria-hidden="true"></i>
            DELETE
          </md-button>
          <md-menu-content width="3">
            <md-menu-item ng-if="multipleVersionsOn">
              <md-button ng-click="askForConfirmToDelete('latest')">
                <span md-menu-align-target="">Delete Latest Version</span>
              </md-button>
            </md-menu-item>
            <md-menu-item ng-if="multipleVersionsOn">
              <md-button ng-click="askForConfirmToDelete(subjectObject.version)">
                <span md-menu-align-target=""> Delete Selected Version ({{subjectObject.version}})</span>
              </md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="askForConfirmToDelete()">
                <span md-menu-align-target="">Delete Subject</span>
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
    </div>
  </md-toolbar>
  <md-content flex layout-padding style="padding: 2px;">
      <div  flex-gt-sm="nogrow"  style="background-color: rgba(0, 128, 0, 0.04);padding:20px;" flex ng-show="showDeleteConfirmation">
          Schema <b>{{subjectObject.subjectName}}</b> <span ng-if="versionToBeDeleted">version: <b>{{versionToBeDeleted}}</b></span> will be <span class="text-danger">deleted</span>.
            <div style="position:absolute;top:5px;right:0;">
                <md-button class="btn-danger" type="button" ng-click="deleteSchema(versionToBeDeleted)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                DELETE
                </md-button>
                <md-button type="button" ng-click="showDeleteConfirmation=false;">
                    <i class="fa fa fa-ban ng-scope" aria-hidden="true"></i>
                CANCEL</md-button>

            </div>

        </div>
    <md-tabs md-dynamic-height md-border-bottom style="padding:0">
      <md-tab md-on-select="hideEdit = false;">
        <md-tab-label>
          Schema
          <!--<i class="fa fa-file-text-o" style="padding-right:10px;" aria-hidden="true"></i> Schema-->
        </md-tab-label>
        <md-tab-body>
          <md-content class="md-padding" style="max-height:{{maxHeight}}px">
            <!--put avro here-->
              <form name="form" class="form">
                <div ng-if="aceReady">
                  <div style="color:red;" ng-show="form.json.$error.validJson">- Syntax Error</div>

                    <div id="left"
                         ng-class="{'has-error':form.json.$invalid, 'has-success':!form.json.$invalid}"
                         ng-model="aceString"
                         ng-readonly="!isAvroAceEditable"
                         ng-style="{'background-color':aceBackgroundColor}"
                         name="json"
                         ui-ace="{ mode: 'json', firstLineNumber: 1,  onLoad: viewSchemaAceLoaded, onChange: viewSchemaAceChanged,  blockScrolling: Infinity ,  showPrintMargin:false}"
                         valid-json
                    ></div>
                </div>
              </form>
          </md-content><!--<div ng-show="form.json.$invalid && isAvroAceEditable" style="color:red;">- Invalid syntax</div>-->
          <!-- When in edit-state, display the TEST button -->
          <md-button style="float: right; margin-right: 32px;"
                     class="md-raised"
                     ng-disabled="form.json.$error.validJson"
                     ng-show="isAvroAceEditable && !isAvroUpdatedAndCompatible && !hideEdit" ng-click="testAvroCompatibility();"
                     aria-label="TEST"
                     aria-hidden="false">
            VALIDATE
          </md-button>
          <!-- When in edit-state, and Avro is Updated and Compatible display the UPDATE button -->
          <md-button ng-show="isAvroAceEditable && isAvroUpdatedAndCompatible && !hideEdit" ng-click="evolveAvroSchema();"
                     style="float: right; margin-right: 32px;"
                     class="md-raised"
                     type="button" aria-label="EVOLVE SCHEMA"
                     aria-hidden="false">
            <i class="fa fa-floppy-o ng-scope" aria-hidden="true"></i>
            EVOLVE SCHEMA
          </md-button>
        </md-tab-body>
      </md-tab>

      <md-tab  md-on-select="otherTabSelected()" ng-if="aceReady && aceString.length > 10">
        <md-tab-label>
          Info
          <!--<i class="fa fa-table" style="padding-right:10px;" aria-hidden="true"></i> Info-->
        </md-tab-label>
        <md-tab-body>
          <md-content class="md-padding">
            <!-- Nice header -->
            <md-card style="box-shadow:none;" ng-hide="arraySchema">
              <md-card-header style="padding:10px">
                <md-card-avatar>
                  <md-icon class="md-avatar-icon" md-svg-icon="src/assets/icons/avro.svg"
                           style="height: 32px;width: 32px;margin-top: 10px;margin-left: 5px;padding:0;background-color:white"></md-icon>
                </md-card-avatar>
                <md-card-header-text>
                  <span class="md-title"><b>type:</b> {{subjectObject.Schema.type}}</span>
                  <span class="md-title"><b>name:</b> {{subjectObject.Schema.name}}</span>
                  <span class="md-title"><b>namespace:</b> {{subjectObject.Schema.namespace}}</span>
                </md-card-header-text>
              </md-card-header>
              <md-card-content ng-show="subjectObject.Schema.doc != undefined" style="padding-bottom:5px">
                <p class="md-card-image md-caption ng-binding">{{subjectObject.Schema.doc}}</p>
              </md-card-content>
            </md-card>

            <!-- 3a. data table -->

            <md-table-container ng-hide="arraySchema">
              <table md-table md-row-select="optionsTable.rowSelection" multiple="{{optionsTable.multiSelect}}"
                     ng-model="selected" md-progress="promise">
                <thead ng-if="!optionsTable.decapitate" md-head md-order="query.order" md-on-reorder="logOrder">
                <tr md-row>
                  <th md-column md-order-by="name"><span>Name</span></th>
                  <th md-column md-order-by="type"><span>Type</span></th>
                  <th md-column md-order-by="default"><span>Default</span></th>
                  <th md-column md-order-by="doc"><span>Documentation</span></th>
                </tr>
                </thead>
                <tbody md-body>
                <tr md-row md-select="selected" md-select-id="name" ng-repeat="s in schema">
                  <td md-cell>{{s.name}}</td>
                  <td md-cell>
                    <json-tree ng-show="showTree(s.type)" object="s.type" root-name="'Type'"></json-tree>
                    <div ng-hide="showTree(s.type)">{{s.type}}</div>
                  </td>
                  <td md-cell>{{s.default}}</td>
                  <td md-cell class="md-card-image md-caption">{{s.doc}}</td>
                </tr>
                </tbody>
              </table>
            </md-table-container>
            <div ng-repeat="schemas in subjectObject.Schema" ng-show="arraySchema">
              <md-card style="box-shadow:none;">
                <md-card-header style="padding:10px">
                  <md-card-avatar>
                    <md-icon class="md-avatar-icon" md-svg-icon="src/assets/icons/avro.svg"
                             style="height: 32px;width: 32px;margin-top: 10px;margin-left: 5px;padding:0;background-color:white"></md-icon>
                  </md-card-avatar>
                  <md-card-header-text>
                    <span class="md-title"><b>type:</b> {{schemas.type}}</span>
                    <span class="md-title"><b>name:</b> {{schemas.name}}</span>
                    <span class="md-title"><b>namespace:</b> {{schemas.namespace}}</span>
                  </md-card-header-text>
                </md-card-header>
                <md-card-content ng-show="subjectObject.Schema.doc != undefined" style="padding-bottom:5px">
                  <p class="md-card-image md-caption ng-binding">{{subjectObject.Schema.doc}}</p>
                </md-card-content>
              </md-card>
              <md-table-container>
                <table md-table md-row-select="optionsTable.rowSelection" multiple="{{optionsTable.multiSelect}}"
                       ng-model="selected" md-progress="promise"
                >
                  <thead ng-if="!optionsTable.decapitate" md-head md-order="query.order" md-on-reorder="logOrder">
                  <tr md-row>
                    <th md-column md-order-by="name"><span>Name</span></th>
                    <th md-column md-order-by="type"><span>Type</span></th>
                    <th md-column md-order-by="default"><span>Default</span></th>
                    <th md-column md-order-by="doc"><span>Documentation</span></th>
                  </tr>
                  </thead>
                  <tbody md-body>
                  <tr md-row md-select="selected" md-select-id="name" ng-repeat="s in schemas.fields">
                    <td md-cell>{{s.name}}</td>
                    <td md-cell>
                      <json-tree ng-show="showTree(s.type)" object="s.type" root-name="'Type'"></json-tree>
                      <div ng-hide="showTree(s.type)">{{s.type}}</div>
                    </td>
                    <td md-cell>{{s.default}}</td>
                    <td md-cell class="md-card-image md-caption">{{s.doc}}</td>
                  </tr>
                  </tbody>
                </table>
              </md-table-container>
              <div class="seperator" ng-hide="$index ==  subjectObject.Schema.length -1"></div>
            </div>

          </md-content>
        </md-tab-body>
      </md-tab>
      <md-tab md-on-select="hideEdit = true;" ng-if="!readonlyMode">
        <md-tab-label>
          Config
          <!--<i class="fa fa-file-text-o" style="padding-right:10px;" aria-hidden="true"></i> Schema-->
        </md-tab-label>
        <md-tab-body>
          <md-content class="md-padding">
            <!--put avro here-->
            <form  ng-cloak>
              <p><span  ng-if="existingValue">Current compatibility for <b>{{subjectObject.subjectName}}</b>  : <span class="radioValue">{{ existingValue }}</span><br /></span>
              <span  ng-if="!existingValue">Schema <b>{{subjectObject.subjectName}}</b> uses the global compatibility level [{{globalConfig}}]<br /></span>
              Change compatibility level to:
              </p>
              <md-radio-group ng-model="compatibilitySelect"  ng-change='success=false'>
                <md-radio-button value="NONE">NONE</md-radio-button>
                <md-radio-button value="FULL"> FULL </md-radio-button>
                <md-radio-button value="FORWARD">FORWARD</md-radio-button>
                <md-radio-button value="BACKWARD">BACKWARD</md-radio-button>
                <md-radio-button ng-if="allowTransitiveCompatibilities" value="FULL_TRANSITIVE">FULL TRANSITIVE</md-radio-button>
                <md-radio-button ng-if="allowTransitiveCompatibilities" value="FORWARD_TRANSITIVE">FORWARD TRANSITIVE</md-radio-button>
                <md-radio-button ng-if="allowTransitiveCompatibilities" value="BACKWARD_TRANSITIVE">BACKWARD TRANSITIVE</md-radio-button>
              </md-radio-group>
              <md-button class="md-raised" ng-disabled="!compatibilitySelect" ng-click="updateCompatibility(compatibilitySelect)" type="button">Update</md-button>
            </form>
            <div ng-show = "success">
              <span style="color:green">Successfully changed compatibility level to {{compatibilitySelect}} </span>
            </div>
          </md-content>
        </md-tab-body>
      </md-tab>
      <md-tab  md-on-select="otherTabSelected()" ng-if="completeSubjectHistory.length > 1">
        <md-tab-label>
          <i class="" style="padding-right:10px;" aria-hidden="true"></i> History
        </md-tab-label>
        <md-tab-body>
          <md-content class="md-padding">
            <div ng-show="x.version != 1" ng-repeat="x in completeSubjectHistory | reverse">
              <!--<pre semantic-diff left-obj="x.left.text | json" right-obj="x.right.text | json"></pre>-->
              <h5>Version {{x.version}} <span style="font-weight: 200;">(Schema ID: {{x.id}})</span></h5>
              <pre
                      style="background-color:white;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;"
                      line-diff left-obj="x.previous | json" right-obj="x.current | json"></pre>
            </div>
            <h5>Version 1 <span
                    style="font-weight: 200;">(Schema ID: {{completeSubjectHistory[0].id}})</span></h5>
            <pre
                    style="background-color:white;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;"
                    line-diff
                    left-obj="''"
                    right-obj="completeSubjectHistory[0].current | json"></pre>
          </md-content>
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </md-content>
  <!--old code ends here-->
</md-card>
